<section class="price-container">
  <div>
    <span class="price"
      ><strong>{{ monthlyRentPriceWithDiscount() | currency : currency_symbol() }}</strong
      >/month</span
    >
    <s *ngIf="discount() > 0" class="price-old"
      ><strong>{{ monthlyRentPrice() | currency : currency_symbol() }}</strong
      >/month</s
    >
  </div>
  <strong *ngIf="discount() > 0" class="price-discount">{{ discount() }}% OFF</strong>
</section>

<mat-divider></mat-divider>

<section class="guests-container" [formGroup]="bookingForm" [ngClass]="{ 'filter-blur': isGuest() }">
  <mat-form-field appearance="outline">
    <mat-label>Enter renting period</mat-label>
    <mat-date-range-input
      [formGroup]="rentingPeriod"
      [rangePicker]="picker"
      [min]="startFromToday()"
      [disabled]="isGuest()"
    >
      <input required matStartDate formControlName="start" placeholder="Start date" [disabled]="isGuest()" />
      <input required matEndDate formControlName="end" placeholder="End date" [disabled]="isGuest()" />
    </mat-date-range-input>
    <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-date-range-picker #picker></mat-date-range-picker>
  </mat-form-field>

  <mat-form-field appearance="outline">
    <mat-label>Number of Guests</mat-label>
    <mat-select formControlName="guests" [disabled]="isGuest()">
      <mat-option *ngFor="let num of capacity()" [value]="num">{{ num | i18nPlural : capacityMapping }}</mat-option>
    </mat-select>
    <mat-hint>Max. {{ capacity().length }} guests are allowed</mat-hint>
  </mat-form-field>
</section>

<section class="price-details-container" [ngClass]="{ 'filter-blur': isGuest() }">
  <table>
    <tr>
      <td>{{ months() | i18nPlural : monthsMapping }}</td>
      <td>{{ monthlyRentPriceWithDiscount() * months() | currency : currency_symbol() }}</td>
    </tr>
    <tr>
      <td>Number of guests</td>
      <td>{{ +guests.value }}</td>
    </tr>
    <tr *ngIf="discount() > 0">
      <td>Discount {{ discount() }}%</td>
      <td>-{{ monthlyRentPrice() - monthlyRentPriceWithDiscount() | currency : currency_symbol() }}</td>
    </tr>
    <tr>
      <td>Cleaning fee</td>
      <td>{{ this.listing?.fees?.[0] | currency: currency_symbol() }}</td>
    </tr>
    <tr>
      <td>Service fee</td>
      <td>{{ this.listing?.fees?.[1] | currency: currency_symbol() }}</td>
    </tr>
    <tr>
      <td>Occupancy taxes and fees</td>
      <td>{{ this.listing?.fees?.[2] | currency: currency_symbol() }}</td>
    </tr>
  </table>

  <div class="price-total">
    <span>Total payment</span>
    <span>{{ total() | currency : currency_symbol() }}</span>
  </div>
</section>

<section class="footer-container" [ngClass]="{ 'filter-blur': isGuest() }">
  <button (click)="!isGuest() && rent()" [disabled]="!rentingPeriod.valid" mat-flat-button color="primary">
    Reserve Now
  </button>
  <mat-hint
    >Your credit card will be charged once the reservation is approved. <a routerLink="/tos">Terms of service</a>
  </mat-hint>
</section>

<section class="login-container" *appHasRole="[userRole.Guest]">
  Please login to book this listing.
  <a routerLink="/auth/login" mat-flat-button color="primary">Login</a>
</section>
